<template>
  <div
    ref="headerCellInstance"
    :style="setWidth(header)"
    @click.stop="clickHeaderCell(header)"
    :class="['m-header-cell', header.children ? 'has-children-cell' : '']"
  >
    <span style="height: 50px">
      <div class="text-content">
        {{ header.title }}
      </div>
      <span class="operation-icon" v-if="header.sortable && !header.children">
        <i
          :class="[
            'el-icon-caret-top',
            'sort-icon',
            sortables.props === header.sortable && sortables.order === 'asc'
              ? 'active-sort-icon'
              : '',
          ]"
        ></i>
        <i
          :class="[
            'el-icon-caret-bottom',
            'sort-icon',
            sortables.props === header.sortable && sortables.order === 'desc'
              ? 'active-sort-icon'
              : '',
          ]"
        ></i>
      </span>
      <vue-draggable-resizable
        v-if="!header.children && !lastHeader && header.resizable"
        class="table-draggable-handle"
        :key="header.dataIndex"
        ref="vueDraggableInstance"
        axis="x"
        :w="5"
        :z="1"
        :x="0"
        :draggable="true"
        :resizable="false"
        @dragstop="onDragstop"
        :prevent-deactivation="true"
        @click.stop="() => false"
      >
      </vue-draggable-resizable>
    </span>
    <div
      class="children-cell-content"
      v-if="header.children && header.children.length"
    >
      <m-header-cell
        v-for="(c, index) in header.children"
        :key="index"
        :header="c"
        :sortables="sortables"
        @updateLayout="$emit('updateLayout')"
        :lastHeader="index === header.children.length - 1"
      ></m-header-cell>
    </div>
  </div>
</template>
<script>
import { inject,toRefs,ref,getCurrentInstance,onMounted } from "vue";
import VueDraggableResizable from './vue-draggable-resizable.vue'
export default {
  name: "MHeaderCell",
  components:{
    VueDraggableResizable
  },
  props: {
    header: {
      type: Object,
      required: true,
    },
    sortables: {
      type: Object,
      required: true,
    },
    lastHeader: {
      type: Boolean,
      default: () => false,
    },
  },
  setup(props,context) {
      let setWidth = inject('setWidth')
      let clickHeaderCell = inject('clickHeaderCell')
      let {header,sortables,lastHeader} = toRefs(props)
      let minOffsetLeft = ref(0)
      let vueDraggableInstance = ref(null)
      let headerCellInstance = ref(null)
      let {ctx} = getCurrentInstance()
      const calculateMinOffsetLeft = function(){
        minOffsetLeft.value = headerCellInstance.value.getBoundingClientRect().width - 24 - (header.value.sortable ? header.value.title.length+1:header.value.title.length)*12
      }
      const onDragstop = function(e){
        if(isNaN(e)) return
        if(e < 0 && Math.abs(e) > minOffsetLeft.value) e = minOffsetLeft.value
        header.value.width = headerCellInstance.value.getBoundingClientRect().width+e
        vueDraggableInstance.value.left = 0
        ctx.$forceUpdate()
        ctx.$nextTick(()=>{
          calculateMinOffsetLeft()
        })
        context.emit('updateLayout')
      }
      onMounted(()=>{
        calculateMinOffsetLeft()
      })
      return {
          header,
          sortables,
          lastHeader,
          setWidth,
          clickHeaderCell,
          onDragstop,
          vueDraggableInstance,
          headerCellInstance
      }

  }
};
</script>
<style lang="scss" scoped>
.m-header-cell {
  height: 100%;
  padding: 0 12px;
  display: flex;
  align-items: center;
  font-weight: 600;
  border-right: 1px solid #ccc;
  position: relative;
  > span {
    position: relative;
    display: flex;
    flex: 1;
    justify-content: space-between;
    .text-content {
      display: flex;
      align-items: center;
    }
    .operation-icon {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .sort-icon {
        color: #ccc;
        display: block;
        line-height: 8px;
      }
      .sort-icon:hover {
        color: #aaa;
      }
      .active-sort-icon {
        color: #1890ff !important;
      }
    }
    .table-draggable-handle {
      height: 100% !important;
      bottom: 0;
      left: auto !important;
      right: -12px;
      cursor: col-resize;
      touch-action: none;
      position: absolute;
    }
    .table-draggable-handle:hover {
      background-color: #1890ff;
    }
  }
  .children-cell-content {
    display: flex;
    .m-header-cell:last-child {
      border-right: none;
    }
  }
}
.has-children-cell {
  display: block !important;
  padding: 0 !important;
  .m-header-cell {
    //flex: 1;
  }
  > span {
    border-bottom: 1px solid #ccc;
    padding: 0 12px;
  }
}
</style>